<template>

  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div v-if="formData">
          <span style="font-size: 16px; margin-right: 20px">
            {{ formData.userName }}
          </span>
          <el-tag type="warning" size="small">
            {{ getLabel('reAgentStatus',formData?.reAgentStatus) }}
          </el-tag>
        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回</el-button>
        <template v-if="formData">
          <el-button v-auth="{v:['crm:editorial:partTime:dealWith'],bool:formData?.reAgentStatus === '1'}"
            type="primary" size="small" @click="handlChange">处理结束
          </el-button>
        </template>
      </template>
    </header-module>

    <div class="main-content">

      <el-form label-width="100px" label-position="right" size="small">
        <el-row gutter="40">

          <el-col :span="24">
            <item-title title="基本信息" />
          </el-col>

          <el-col :span="8">
            <el-form-item label="代理商类型：">
              <span v-if=" formData?.agentType === 'agent'">企业代理</span>
              <span v-if=" formData?.agentType === 'agent_person'">兼职大包</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="性别：">
              <span v-if="formData?.sex === '1'">男</span>
              <span v-if="formData?.sex === '2'">女 </span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="联系电话：">
              <span>{{formData?.tel}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="联系地址：">
              <span>{{formData?.address}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="身份证：">
              <span>{{formData?.cardNumber}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="身份证附件：">
              <div v-for="(item,index) in formData?.cardFiles" :key="index" class="file-item">
                <image-upload-view disabled="true" :data="item" />
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <item-title title="意向代理业务" />
          </el-col>

          <el-col :span="24">
            <el-form-item label="代理产品：">
              <span v-for="(item,index) in productDescribe" :key="item.productId">
                <span> {{ item.productName }}</span>
                <span v-if="index !== productDescribe.length - 1"> 、</span>
              </span>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="代理地区：">
              <area-list-view :areas="formData?.region" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="代理属性：">
              <span v-for="(item,index) in formData?.agentIntentionAttribute" :key="index">
                <span> {{ getLabel('agentAttribute',item) }}</span>
                <span v-if="index !== formData?.agentIntentionAttribute.length - 1"> 、</span>
              </span>
            </el-form-item>
          </el-col>

          <el-col :span="24" v-if="terminalName && terminalName.length > 0">
            <el-form-item label="代理终端：">
              <span v-for="(item,index) in terminalName" :key="item.terminalId">
                <span> {{ item.terminalName }}</span>
                <span v-if="index !== terminalName.length - 1"> 、</span>
              </span>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>

    </div>

  </div>

</template>

<script>
import {getCurrentInstance, inject, onMounted, reactive, toRefs,} from "vue";
import {useRoute, useRouter} from "vue-router";

export default {
  name: "PartTime",
  setup() {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    const currentInstance = getCurrentInstance();
    const data = reactive({
      formData: {},
      productDescribe: null,
      terminalName: null,
    });

    const handlBack = () => {
      router.go(-1);
    };

    const handlDetail = (id) => {
      api.editorial.EDITORIAL_DETAILS(id).then((res) => {
        if (res.code === 0) {
          data.formData = res.data.reAgent;
          data.productDescribe = JSON.parse(res.data.reAgent.productDescribe);
          data.terminalName = JSON.parse(res.data.reAgent.terminalName);
        }
      });
    };

    const handlChange = () => {
      currentInstance.proxy
        .alertBox({
          message: "确定将推荐代理信息更改为已处理？",
        })
        .then(() => {
          api.editorial.EDITORIAL_WITH(route.query.id).then((res) => {
            if (res.code === 0) {
              handlDetail(route.query.id);
            } else {
              currentInstance.proxy.customMessage({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    };

    onMounted(() => {
      if (route.query.id) {
        handlDetail(route.query.id);
      }
    });

    return {
      ...toRefs(data),
      handlBack,
      handlDetail,
      handlChange,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
